<template>
  <div>
    <el-row>
      <el-col>
        <!--强制要求使用v-model-->
        <el-input v-model="value" placeholder="123" style="width: 200px"></el-input>
        <!--密码框-->
        <el-input v-model="value" placeholder="mima" show-password style="width: 200px"></el-input>
        <!--自定义文本框-->
        <el-input v-model="value1" placeholder="ewq" style="width: 500px" type="textarea"></el-input>
      </el-col>
      <el-col>
        <!--带图标的文本框-->
        <el-input v-model="value" placeholder="sousuo" prefix-icon="el-icon-search" style="width: 200px"></el-input>
        <!--反置图标-->
        <el-input v-model="value" placeholder="sousuo" style="width: 200px" suffix-icon="el-icon-search"></el-input>
        <!--一键删除文本框内容 clearable-->
        <el-input v-model="value" clearable placeholder="delete" prefix-icon="el-icon-search"
                  style="width: 200px"></el-input>
      </el-col>
    </el-row>

    <el-row style="margin: 20px 0">
      <!--带搜索建议的输入框-->
      <el-autocomplete v-model="valueQuery" :fetch-suggestions="querySearch" :trigger-on-focus="false"
                       placeholder="请输入内容" style="width: 300px"></el-autocomplete>
    </el-row>

    <el-row>
      <!--下拉框-->
      <el-select v-model="valueSelect1" clearable multiple @change="changeSelect">
        <!--
        value	选项的值
        -->
        <el-option v-for="fruit in fruits" :key="fruit.id" :value="fruit.name">
        </el-option>
      </el-select>
      <br>
      <el-select v-model="valueSelect2" filterable @change="changeSelectUsers">
        <!--
        value	选项的值，真正绑定的值
        label	选项的标签，若不设置则默认与 value 相同，显示在下拉框的值
        可以达到显示的值和绑定的值不一样的效果
        -->
        <el-option v-for="user in users" :key="user.card" :label="user.label" :value="user.card">
        </el-option>
      </el-select>
    </el-row>

    <el-row>
      <!--单选-->
      <el-radio-group v-model="radio" @change="selectRadio">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
      <!--多选-->
      <el-checkbox-group v-model="checkList" @change="selectCheckBox">
        <el-checkbox label="复选框A"></el-checkbox>
        <el-checkbox label="复选框B"></el-checkbox>
        <el-checkbox label="复选框C"></el-checkbox>
        <el-checkbox label="复选框D"></el-checkbox>
      </el-checkbox-group>
    </el-row>
    <!--时间-->
    <el-row>
      <!--一定要设置value-format-->
      <!--日期-->
      <el-date-picker v-model="date" placeholder="选择日期" type="date" value-format="yyyy-MM-dd"
                      @change="changeDate"></el-date-picker>
      <br>
      <!--时间日期-->
      <el-date-picker v-model="dateTime" placeholder="选择时间日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                      @change="changeDateTime"></el-date-picker>
      <br>
      <!--日期范围-->
      <el-date-picker v-model="dateRange" end-placeholder="结束日期" start-placeholder="开始日期" type="daterange"
                      value-format="yyyy-MM-dd" @change="changeDateRange"></el-date-picker>
    </el-row>

    <el-row style="margin: 20px 0">
      <el-table :data="tableData" :header-cell-style="{background:'aliceblue' ,fontsize:'16px'}" border>
        <el-table-column align="center" label="序号" prop="id"></el-table-column>
        <el-table-column align="center" label="名称" prop="name"></el-table-column>
        <el-table-column align="center" label="年龄" prop="age"></el-table-column>
        <el-table-column align="center" label="地址" prop="address"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

<script>

export default {
  name: 'FromView',
  data() {
    return {
      value: '',
      value1: '',
      valueQuery: '',
      valueSelect1: '',
      valueSelect2: '',
      radio: '',
      date: '',
      dateTime: '',
      dateRange: '',
      /*值必须是一个对象，而且要带上value*/
      coffees: [{value: '星巴克'}, {value: '瑞幸'}, {value: '库迪'}],
      fruits: [
        {name: '苹果', id: 1},
        {name: '香梨', id: 2},
        {name: '西瓜', id: 3},
        {name: '葡萄', id: 4}
      ],
      users: [
        {label: 'kevin', card: '11111111111111111'},
        {label: 'elysia', card: '222222222222222222'},
        {label: 'v2v', card: '333333333333333333'},
        {label: 'jie', card: '444444444444444444'},
        {label: 'eden', card: '555555555555555555'}
      ],
      checkList: [],
      tableData: [
        {id: 1, name: 'kevin', age: 22, address: '逐火一号楼'},
        {id: 2, name: 'elysia', age: 18, address: '逐火二号楼'},
        {id: 3, name: 'v2v', age: 19, address: '逐火二号楼'},
        {id: 4, name: 'jie', age: 20, address: '逐火一号楼'},
        {id: 5, name: 'eden', age: 21, address: '逐火二号楼'},
      ]
    }
  },
  methods: {
    querySearch(query, cd) {
      /*
      * this.coffees：这是一个数组，存储了一些咖啡的信息。
      * filter：这是JavaScript数组的一个方法，用于筛选出满足特定条件的元素，并返回一个新数组。
      * v => v.value.includes(query)：这是一个箭头函数，用作filter方法的回调函数。
      * 对于coffees数组中的每个元素v，这个函数都会检查v的value属性是否包含query字符串。
      * 如果包含，该元素就会出现在新数组中。
      */
      let result = query ? this.coffees.filter(v => v.value.includes(query)) : this.coffees
      cd(result)
    },
    changeSelect() {
      console.log(this.valueSelect1)
    },
    changeSelectUsers() {
      console.log(this.valueSelect2)
    },
    selectRadio() {
      console.log(this.radio)
    },
    selectCheckBox() {
      console.log(this.checkList)
    },
    changeDate() {
      console.log(this.date)
    },
    changeDateTime() {
      console.log(this.dateTime)
    },
    changeDateRange() {
      console.log(this.dateRange)
    },
    edit(row) {
      // this.$message.success(row.name)
      // this.$message.warning(row.name)
      // this.$notify.info(row.name)

      this.$confirm('提示信息', '提示', {
        type: 'warning'
      }).then(res => {
        this.$message.success('点击了确认')
      }).catch(() => {
        this.$message.warning('点击了取消')
      })
    }

  }
}
</script>